<script lang="ts" setup>
import type { VxeGridListeners, VxeGridProps } from 'vxe-table'

import { dailyStatistics, statistics } from '@fl/api/anjutong'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const couponId = String(route?.params?.id)
type IRowVO = {
    date: string
    receiveCount: string
    receiveQuantity: string
    usageCount: string
    usageQuantity: string
}

const statisticsParams = ref()
const gridOptions = reactive<VxeGridProps<IRowVO>>({
    align: 'center',
    border: true,
    columnConfig: {
        resizable: true,
    },
    columns: [
        { slots: { default: 'date' }, title: '日期' },
        { field: 'receiveCount', title: '领取人数' },
        { field: 'receiveQuantity', title: '领取张数' },
        { field: 'usageCount', title: '使用人数' },
        { field: 'usageQuantity', title: '使用张数' },
    ],
    data: [],
    editConfig: {
        mode: 'row',
        showStatus: true,
        trigger: 'manual',
    },
    height: 600,
    keepSource: true,
    loading: false,
    pagerConfig: {
        currentPage: 1,
        enabled: true,
        pageSize: 10,
        pageSizes: [10, 20, 50, 100, 200, 500],
        total: 0,
    },
    showOverflow: true,
})
const gridEvents: VxeGridListeners<IRowVO> = {
    pageChange({ currentPage, pageSize }) {
        if (gridOptions.pagerConfig) {
            gridOptions.pagerConfig.currentPage = currentPage
            gridOptions.pagerConfig.pageSize = pageSize
        }
        findList()
    },
}
async function findList() {
    gridOptions.loading = true
    try {
        const option = {
            couponId,
            page: gridOptions.pagerConfig?.currentPage,
            size: gridOptions.pagerConfig?.pageSize,
        }
        const data = await dailyStatistics(option)
        gridOptions.loading = false
        if (gridOptions.pagerConfig)
            gridOptions.pagerConfig.total = data?.total ?? 0
        gridOptions.data = data?.records ?? []
    }
    catch (error) {
        gridOptions.loading = false
        gridOptions.data = []
    }
}

async function getStatistics() {
    try {
        const data = await statistics(couponId)
        statisticsParams.value = data
    }
    catch (error) {

    }
}

getStatistics()
findList()
</script>

<template>
    <div class="mb-30 bg-white py-30">
        <el-row>
            <el-col :span="6">
                <el-statistic title="领取张数"
                              :value="Number(statisticsParams?.receiveQuantity ?? 0) "
                />
            </el-col>

            <el-col :span="6">
                <el-statistic title="领取人数"
                              :value="Number(statisticsParams?.receiveCount ?? 0) "
                />
            </el-col>

            <el-col :span="6">
                <el-statistic title="使用张树"
                              :value="Number(statisticsParams?.usageQuantity ?? 0) "
                />
            </el-col>

            <el-col :span="6">
                <el-statistic title="使用人数"
                              :value="Number(statisticsParams?.usageCount ?? 0) "
                />
            </el-col>
        </el-row>
    </div>

    <div class="bg-white p-30">
        <vxe-grid v-bind="gridOptions"
                  v-on="gridEvents"
        >
            <template #date="{ row }">
                {{ String(row?.date ?? "").substring(0, 10) }}
            </template>
        </vxe-grid>

        <el-button @click="router.go(-1)">
            返回
        </el-button>
    </div>
</template>

<style scoped>
.el-col {
    text-align: center;
}

:deep(.el-statistic__head) {
    font-size: 14px;
    color: #ccc;
}
</style>
